<!--<template>-->
<!--  <div class="my-map">-->
<!--    <div id='container'></div>-->
<!--    <div id="box">-->
<!--      <div id='time'>北京XXXXXXXXXXX有限公司</div>-->
<!--      &lt;!&ndash;办公地点&ndash;&gt;-->
<!--      <div v-show="!placeFlag">-->
<!--        <van-button id='signIn' type="info">{{ this.signName }}-->
<!--          <p id="dynamicTime"></p>-->
<!--        </van-button>-->
<!--        <br/>-->
<!--        <van-button id='place' round color="linear-gradient(to right, #4FC1E9, #5D9CEC)">-->
<!--          {{ this.officeSpace }}-->
<!--        </van-button>-->
<!--        <br/>-->
<!--        <img class="my-check" :src="check_icon">-->
<!--        <i class="my-i"> 已进入考勤范围 </i>-->
<!--      </div>-->

<!--      &lt;!&ndash;非办公地点&ndash;&gt;-->
<!--      <div v-show="placeFlag">-->
<!--        <van-button id='fieldclock' color="linear-gradient(to right, #CCD1D9, #656D78)">-->
<!--          {{ outsideName }}-->
<!--          <p id="dynamicTime2"></p>-->
<!--        </van-button>-->
<!--        <br>-->
<!--        <van-button id='place' round color="linear-gradient(to right, rgb(255, 96, 52), rgb(199 191 192))">-->
<!--          {{ this.noOfficeSpace }}-->
<!--        </van-button>-->
<!--        <br/>-->
<!--        <img class="my-no-check" :src="no_check_icon">-->
<!--        <i class="my-i2"> 尚未进入考勤范围 </i>-->
<!--        <i @click="refresh" class="my-i3"> 重新定位 </i>-->
<!--        <img @click="refresh" class="my-restart_locate_icon" :src="restart_locate_icon">-->
<!--      </div>-->

<!--      &lt;!&ndash;      <div id='location'>{{ this.scopeIsNo }}</div>&ndash;&gt;-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--import {Toast} from 'vant';-->
<!--import {Wxconst} from '@/partten';-->

<!--export default {-->
<!--  inject: ['reload'],-->
<!--  name: 'MapPosition',-->
<!--  data() {-->
<!--    return {-->
<!--      check_icon: require('@/assets/iconfont/check.png'),-->
<!--      no_check_icon: require('@/assets/iconfont/no.png'),-->
<!--      restart_locate_icon: require('@/assets/iconfont/restart_location.png'),-->
<!--      signInPlace: [],//签到办公地点 设置的签到点 上海-->
<!--      placeFlag: false,-->
<!--      scopeIsNo: '系统正在定位中',-->
<!--      positionInfo: {},-->
<!--      signName: "上班签到",-->
<!--      outsideName: "外勤打卡",-->
<!--      officeSpace: '办公地点',-->
<!--      noOfficeSpace: '非办公地点',-->
<!--      // accessRangeSpace: '已进入考勤范围',-->
<!--      // noAccessRangeSpace: '未进入考勤范围',-->
<!--      setDistance: 100-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    this.initMap()-->
<!--    setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());", 1000);-->
<!--    const now = new Date(), hour = now.getHours();-->
<!--    console.log("hour" + hour)-->
<!--    // if (hour > 12) {-->
<!--    //   $("#defshow").html(' <input id="shangxiaban" type="checkbox" name="close" lay-filter="switchTest" lay-skin="switch" lay-text="上班签到|下班签退">');-->
<!--    //   $("#isonoff").val(false);-->
<!--    // }-->

<!--    setInterval(() => {-->
<!--      this.displayDate();-->
<!--    }, 1000)-->

<!--    setInterval(() => {-->
<!--      this.displayDate2();-->
<!--    }, 1000)-->
<!--  },-->
<!--  methods: {-->
<!--    refresh() {-->
<!--      this.reload()// 需要刷新页面-->
<!--    },-->
<!--    initMap() {-->
<!--      var geolocation-->
<!--      var that = this-->
<!--      //以为这里是要获取地图容器的id,所以要写在mounted之中-->
<!--      var mapObj = new AMap.Map('container', {-->
<!--        resizeEnable: true,-->
<!--        // center: [116.56086,39.774944],-->
<!--        // center: [116.403742, 39.909202],-->
<!--        // zoom: 15-->
<!--      });-->

<!--      mapObj.plugin('AMap.Geolocation', function () {-->
<!--        geolocation = new AMap.Geolocation({-->
<!--          enableHighAccuracy: true, // 是否使用高精度定位，默认:true-->
<!--          timeout: 10000,           // 超过10秒后停止定位，默认：无穷大-->
<!--          // maximumAge: 0,            // 定位结果缓存0毫秒，默认：0-->
<!--          // convert: true,            // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true-->
<!--          showButton: true,         // 显示定位按钮，默认：true-->
<!--          buttonPosition: 'RB',     // 定位按钮停靠位置，默认：'LB'，左下角  RB表示右下-->
<!--          buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)-->
<!--          // showMarker: true,         // 定位成功后在定位到的位置显示点标记，默认：true-->
<!--          // showCircle: true,         // 定位成功后用圆圈表示定位精度范围，默认：true-->
<!--          // panToLocation: true,      // 定位成功后将定位到的位置作为地图中心点，默认：true-->
<!--          zoomToAccuracy: true       // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false-->
<!--        });-->

<!--        //     enableHighAccuracy: true,//是否使用高精度定位，默认:true-->
<!--        //     timeout: 10000,          //超过10秒后停止定位，默认：5s-->
<!--        //     buttonPosition:'RB',    //定位按钮的停靠位置-->
<!--        //     buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)-->
<!--        //     zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点-->


<!--        mapObj.addControl(geolocation);-->
<!--        geolocation.getCurrentPosition();-->
<!--        AMap.event.addListener(geolocation, 'complete', that.onComplete); // 返回定位信息-->
<!--        AMap.event.addListener(geolocation, 'error', that.onError);       // 返回定位出错信息-->
<!--      });-->
<!--    },-->
<!--    onComplete(data) {-->

<!--      // this.positionInfo = data-->
<!--      // var res = '经纬度：' + data.position +-->
<!--      //     '\n精度范围：' + data.accuracy +-->
<!--      //     '米\n定位结果的来源：' + data.location_type +-->
<!--      //     '\n状态信息：' + data.info +-->
<!--      //     '\n地址：' + data.formattedAddress +-->
<!--      //     '\n地址信息：' + JSON.stringify(data.addressComponent, null, 4);-->
<!--      // console.log(this.positionInfo)-->
<!--      // console.log("moren" + res);-->

<!--      console.log("定位成功")-->
<!--      const str = [];-->
<!--      str.push('定位结果：' + data.position);-->
<!--      str.push('定位类别：' + data.location_type);-->
<!--      if (data.accuracy) {-->
<!--        str.push('精度：' + data.accuracy + ' 米');-->
<!--      }//如为IP精确定位结果则没有精度信息-->
<!--      str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));-->

<!--      const getposition = [data.position.lng, data.position.lat];//获取当前位置的经纬度-->
<!--      const location = data.formattedAddress;//具体街道位置信息-->
<!--      console.log("获取当前位置的经纬度->" + getposition);-->
<!--      console.log("具体街道位置信息->" + location);-->

<!--      // this.signInPlace = [116.560399,39.776341];//设置的签到点-->
<!--      this.signInPlace = [116.56086,39.774944]//设置的签到点-->

<!--      //计算当前位置与考勤点距离  原api（计算两点间的实际距离 AMap.GeometryUtil.distance）-->
<!--      const distance = AMap.GeometryUtil.distance(getposition, this.signInPlace).toFixed(0);-->

<!--      console.log(distance);-->

<!--      // const setDistance = 300;//设定的打卡距离-->
<!--      const distancestr = '仍距' + distance + '米';-->
<!--      console.log("计算当前位置与考勤点距离" + distancestr);-->
<!--      if (distance <= this.setDistance) {-->
<!--        //在范围内-->
<!--        console.log("上班打卡")-->
<!--        this.placeFlag = false-->
<!--      } else {-->
<!--        //不在范围内-->
<!--        console.log("外勤打卡")-->
<!--        this.placeFlag = true-->
<!--      }-->

<!--      $("#signIn").click(function () {-->
<!--        if (distance <= setDistance) {-->
<!--          Toast('上班签到');-->
<!--          //TODO 回显数据到页面-->
<!--          //TODO 数据保存数据库-->
<!--          // this.signName = "下班打卡"-->
<!--        }-->
<!--      });-->

<!--      $("#fieldclock").click(function () {-->
<!--        if (distance > setDistance) {-->
<!--          Toast('外勤打卡');-->
<!--        }-->
<!--      });-->
<!--    },-->
<!--    onError(obj) {-->
<!--      alert(obj.info + '&#45;&#45;' + obj.message);-->
<!--      console.log(obj);-->
<!--    },-->
<!--    //实时显示时间-->
<!--    displayDate() {-->
<!--      var date = new Date();-->
<!--      // var year = date.getFullYear();-->

<!--      // var month = date.getMonth() + 1;-->
<!--      // month = ((month < 10) ? "0" : "") + month;-->
<!--      var day = date.getDate();-->
<!--      day = ((day < 10) ? "0" : "") + day;-->

<!--      var hours = date.getHours();-->
<!--      hours = ((hours < 10) ? "0" : "") + hours;-->

<!--      var minutes = date.getMinutes();-->
<!--      minutes = ((minutes < 10) ? "0" : "") + minutes;-->

<!--      var seconds = date.getSeconds();-->
<!--      seconds = ((seconds < 10) ? "0" : "") + seconds;-->

<!--      // var a = new Array("日", "一", "二", "三", "四", "五", "六");-->
<!--      // var day1 = date.getDay();-->
<!--      // day1 = "星期" + a[day1];-->

<!--      //var currenttime = year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds + " " + day1;-->
<!--      var currenttime = hours + ":" + minutes + ":" + seconds;-->
<!--      const signSymbol = this.signSymbol-->
<!--      document.getElementById("dynamicTime").innerHTML = currenttime;-->
<!--    },-->
<!--    //实时显示时间-->
<!--    displayDate2() {-->
<!--      var date = new Date();-->
<!--      // var year = date.getFullYear();-->
<!--      //-->
<!--      // var month = date.getMonth() + 1;-->
<!--      // month = ((month < 10) ? "0" : "") + month;-->
<!--      var day = date.getDate();-->
<!--      day = ((day < 10) ? "0" : "") + day;-->

<!--      var hours = date.getHours();-->
<!--      hours = ((hours < 10) ? "0" : "") + hours;-->

<!--      var minutes = date.getMinutes();-->
<!--      minutes = ((minutes < 10) ? "0" : "") + minutes;-->

<!--      var seconds = date.getSeconds();-->
<!--      seconds = ((seconds < 10) ? "0" : "") + seconds;-->

<!--      // var a = new Array("日", "一", "二", "三", "四", "五", "六");-->
<!--      // var day1 = date.getDay();-->
<!--      // day1 = "星期" + a[day1];-->

<!--      //var currenttime = year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds + " " + day1;-->
<!--      var currenttime = hours + ":" + minutes + ":" + seconds;-->
<!--      const signSymbol = this.signSymbol-->
<!--      document.getElementById("dynamicTime2").innerHTML = currenttime;-->
<!--    }-->
<!--  },-->
<!--}-->
<!--</script>-->
<!--<style lang="less" scoped>-->
<!--.my-map {-->
<!--  text-align: center-->
<!--}-->

<!--.my-check {-->
<!--  height: 12px;-->
<!--  width: 12px;-->
<!--}-->

<!--.my-no-check {-->
<!--  height: 12px;-->
<!--  width: 12px;-->
<!--}-->

<!--.my-restart_locate_icon {-->
<!--  height: 12px;-->
<!--  width: 12px;-->
<!--}-->

<!--.my-i {-->
<!--  font-size: 13px;-->
<!--  font-weight: bold;-->
<!--  color: #1000e6;-->
<!--}-->

<!--.my-i2 {-->
<!--  font-size: 13px;-->
<!--  font-weight: bold;-->
<!--  color: #d65d94;-->
<!--}-->

<!--.my-i3 {-->
<!--  font-size: 13px;-->
<!--  font-weight: bold;-->
<!--  color: #25a4ff;-->
<!--}-->

<!--#dynamicTime {-->
<!--  margin-top: 5%;-->
<!--  font-size: 15px;-->
<!--  color: #F5F7FA;-->
<!--}-->

<!--#dynamicTime2 {-->
<!--  margin-top: 5%;-->
<!--  font-size: 15px;-->
<!--  color: #F5F7FA;-->
<!--}-->

<!--.info {-->
<!--  width: 26rem;-->
<!--}-->

<!--#container {-->
<!--  margin-top: 5%;-->
<!--  height: 280px;-->
<!--  width: 100%;-->
<!--}-->

<!--#signIn {-->
<!--  margin: 10px auto;-->
<!--  width: 140px;-->
<!--  height: 140px;-->
<!--  border-radius: 50%;-->
<!--  box-shadow: 0px 0px 8px #25a4ff;-->
<!--  font-size: 20px;-->
<!--}-->

<!--#fieldclock {-->
<!--  margin: 10px auto;-->
<!--  width: 140px;-->
<!--  height: 140px;-->
<!--  border-radius: 50%;-->
<!--  box-shadow: 0px 0px 8px #969799;-->
<!--  font-size: 20px;-->
<!--}-->

<!--#time {-->
<!--  font-size: 16px;-->
<!--  color: #1e9fff;-->
<!--  font-weight: bold;-->
<!--  margin: 10px;-->
<!--}-->

<!--#place {-->
<!--  margin: 5px auto;-->
<!--  height: 20px;-->
<!--  color: #ffffff;-->
<!--  width: 30%;-->
<!--  font-size: 12px;-->
<!--  padding-top: 1px;-->
<!--}-->

<!--#distance {-->
<!--  margin: 10px;-->

<!--  font-size: 12px;-->
<!--}-->

<!--//-->
<!--.isdiy {-->
<!--  background-color: #5fb878;-->
<!--}-->

<!--.nodiy {-->
<!--  background-color: #ff5722;-->
<!--}-->

<!--//#box {-->
<!--//  position: fixed;-->
<!--//  bottom: 0;-->
<!--//  margin: 10px auto;-->
<!--//  width: 100%;-->
<!--//}-->
<!--#location {-->
<!--  font-size: 12px;-->
<!--}-->
<!--</style>-->
